<template>
  <div class="main-container">
    <el-container>
      <el-header></el-header>
      <el-main>
        <div class="login-box">
          <div class="login-box-header">
            <h1>
              <span>基于元数据的集成模型平台</span>
            </h1>
          </div><!-- /.login-box-header -->
          <!-- 内容区-->
          <div class="login-box-main">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="用户名：" prop="username">
                <el-input v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="form.password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-checkbox>记住密码</el-checkbox>
                <el-button class="loginbutton" type="primary" @click="login('form')">登陆</el-button>
              </el-form-item>
            </el-form>
          </div><!-- /.login-box-main -->
        </div><!-- /.login-box -->
      </el-main>
    </el-container>
  </div><!-- /.main-container -->
</template>

<script>
import axios from 'axios'
import qs from 'qs'

export default {
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      //表单校验
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login (form) {
      console.log("login")
      let vm = this
      vm.$refs[form].validate((valid) => {
        if (valid) {
          //用户名密码全
          let params = {
            username: vm.form.username,
            password: vm.form.password
          }
          axios.post('http://116.62.196.234:80/MT/systemusercontroller/login',
                      params,
                      {headers: {'content-type': 'application/json; charset="UTF-8"'}})
          .then(function (response) {
            //服务器访问成功
            console.log(response)
            if (response.data.result == true) {
              //存储用户名，密码
              vm.$store.state.user = vm.form
              // console.log(vm.$store.state.user)
              //登陆成功，路由跳转
              vm.$router.push({path: '/dashboard'})
            } else {
              //登录失败，做出提示
              vm.$alert('用户名或者密码错误，请重试', '提示', {
                confirmButtonText: '确定'
              })
            }
          })
          .catch(function (error) {
            //服务器出错
            console.log(error)
            vm.$alert('服务器出错了', '提示', {
              confirmButtonText: '确定'
            })
          })
        } else {
          //用户名密码不全
          console.log('error submit!!');
          return false;
        }
      })
    }
  }
}

</script>
<style scoped>
.main-container {
	/*background: url(../assets/pattern.png) repeat;*/
	width: 100%;
	height: 100%;
	position: absolute;
}
.login-box {
	background-color: rgba(239, 243, 248, 0.1);
}
.login-box-header {
  text-align: center;
}
.login-box-main {
  width: 50%;
  margin: 0 auto;
  margin-top: 40px;
}
.loginbutton {
  float: right;
}
</style>
